<template>
  <div id="map"></div>
</template>
<script lang="ts">
    import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
    import {dizhenServer} from '../../api/installServer';
    @Component({
        name: 'DemoMap',
    })
    export default class DemoMap extends Vue {
        public map: any = '' ;
        // 监听比例尺变化
        @Watch('zoom')
        public onZoomChange(oldVal: number|string, newVal: number|string) {
            this.map.zoomTo(newVal);
        }
        get zoom() {
            return this.$store.state[('mapModule' as any )].zoom;
        }
        private mounted() {
            dizhenServer.getMapConfig().then((res: any) => {
                this.initMap(res.data.map);
                this.initBaseLayers(res.data.baseLayers);
                this.initMapEvents();
                this.$store.dispatch('mapModule/mousePointUpdate', [this.map.getCenter()[0], this.map.getCenter()[1]]);
           });
        }

        private beforeDestroy() {
            //
            this.map.off('mousemove', this.onMapClick);
        }

        private initMap(opts: any) {
            this.map = new (G as any).Map(opts);
        }

        private initBaseLayers(baseLayers: any) {
            const baseLayer = (G as any).utils.LayerUtil.createBaseLayer(baseLayers[0]);
            this.map.addLayer(baseLayer);
        }

        private initMapEvents() {
            this.map.on('mousemove', this.onMouseMove);
        }

        private onMouseMove(event: any) {
            this.$store.dispatch('mapModule/mousePointUpdate' , [event.mapX, event.mapY]);
        }
    }
</script>
<style>
#map{
    width: 100%;
    height: 100%;
}
/* ts-gis */
.ol-unselectable .ol-scale-line-inner{
    width: 117px;
    position: fixed;
    bottom: 6px;
    color:#dfdfdf ;
    border: 1px solid #eee;
    border-top: none;
    background: rgba(0,60,136,.5);
    font-size: 10px;
    text-align: center;
    margin: 1px;
    will-change: contents, width;
    left: 20px;
}
/*ts-gis*/
.ol-zoom.ol-unselectable.ol-control{
    position: absolute;
    top: 300px;
    right: 20px;
    left: inherit;
}
</style>